<template>
  <div class="config-panel-container">
    <div v-if="data && data.label">
      <div @click="onSave">--{{ data.label }}---</div>
      <div>
        <el-form ref="refForm" :model="itemData">
          <common-item
            v-for="item in data.configJson"
            v-model="itemData[item.name]"
            :itemConfig="item"
            :key="item.name"
          ></common-item>
        </el-form>
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="内容设置" name="contentConfig"
            >内容设置</el-tab-pane
          >
          <el-tab-pane label="样式设置" name="styleConfig"
            >样式设置</el-tab-pane
          >
        </el-tabs> -->
        <!-- <h3>投放内容</h3> -->
        <!-- <el-button @click="addImage">新增图片</el-button>
        <el-table :data="tableData" style="width: 100%" empty-text="暂无数据">
          <el-table-column prop="idx" label="排序" width="180">
          </el-table-column>
          <el-table-column prop="image" label="图片" width="180">
          </el-table-column>
          <el-table-column prop="operation" label="操作"> </el-table-column>
        </el-table> -->
      </div>
    </div>
    <div v-else>请先选中一个组件进行配置</div>
    <el-dialog :visible="visible" width="600px" title="添加图片">
      <div class="dialog-box">
        <div class="label">图片</div>
        <div class="content">
          <div class="image-box">
            <img
              src="https://azure.summerfarm.net/pop/4o7otoxnrhn30pcb3.png"
              alt=""
            />
            <div class="hot-area-body">
              <drag-item
                v-for="(item, index) in areaList"
                :key="index"
                :cdata="item"
                :range="index"
              ></drag-item>
            </div>
          </div>
          <el-button type="primary">点击上传</el-button>
          <el-button @click="addArea">添加热区</el-button>
        </div>
      </div>
      <div class="dialog-box"></div>
      <div class="dialog-box">
        <div class="label">热区</div>
        <div class="content"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import DragItem from "./components/DragItem2.vue";
import CommonItem from "./common-item.vue";

export default {
  components: {
    DragItem,
    CommonItem,
  },
  props: {
    value: Object,
    currentItem: Object,
  },
  data() {
    return {
      data: this.value,
      tableData: [],
      visible: false,
      fileList: [],
      areaList: [],
      idx: 1,
      itemData: {},
    };
  },
  watch: {
    value: {
      deep: true,
      handler(newVal) {
        this.data = newVal;
      },
    },
    currentItem: {
      deep: true,
      handler(newVal) {
        this.itemData = newVal.dataJson;
      },
    },
  },
  directives: {
    pin: {
      bind: function (el, binding) {
        el.style.position = "fixed";
        el.style.top = binding.value + "px";
      },
    },
  },
  methods: {
    addImage() {
      this.visible = true;
    },
    successFun(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
    },
    addArea() {
      this.areaList.push({
        top: 0,
        left: 0,
        width: 100,
        height: 100,
      });
    },
    handleInput(val) {
      this.$emit("input", val);
    },
    onSave() {
      console.log("onSave==");
      this.$refs["refForm"].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.config-panel-container {
  flex: 2;
  background: #fff;
  padding: 0 20px;
}
/deep/ .el-table {
  min-height: 100px;
}
.dialog-box {
  display: flex;
  margin-bottom: 20px;
  .label {
    width: 100px;
  }
  .content {
    .image-box {
      margin-bottom: 10px;
      position: relative;
    }
    img {
      width: 100%;
      display: block;
    }
    .hot-area-body {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
